<!-- 六彩旗帜标识 -->

<template>
  <el-tooltip effect="light" placement="top-start">
    <div slot="content" :loading="loading">
      <el-button type="text" style="font-size:20px;color:red" @click="checkedColor(id, 'red')"><i class="fa fa-flag"></i></el-button>
      <el-button type="text" style="font-size:20px;color:orange" @click="checkedColor(id, 'orange')"><i class="fa fa-flag"></i></el-button>
      <el-button type="text" style="font-size:20px;color:gold;" @click="checkedColor(id, 'yellow')"><i class="fa fa-flag"></i></el-button>
      <el-button type="text" style="font-size:20px;color:green" @click="checkedColor(id, 'green')"><i class="fa fa-flag"></i></el-button>
      <el-button type="text" style="font-size:20px;color:blue" @click="checkedColor(id, 'blue')"><i class="fa fa-flag"></i></el-button>
      <el-button type="text" style="font-size:20px;color:gray" @click="checkedColor(id, 'gray')"><i class="fa fa-flag"></i></el-button>
    </div>
    <span style="font-size:20px;" :style="{'color': resultColor}"><i class="fa fa-flag" ></i></span>
    <!--<span>color: {{resultColor}}</span>-->
  </el-tooltip>
</template>

<script>
import {dotData, confirm} from '@/utils'
export default {
  name: 'truncate',
  props: {
    id: {
      type: String,
      required: true
    },
    resultColor: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      loading: false
    }
  },
  methods: {
    checkedColor(id, color) {
      this.loading = true
      this.$ajax.post('/ms-fahuobao-order/fhbOrderFlag/colorFlag', {orderId: id, colorFlag: color}).then(response => {
        const success = dotData(response, 'success')
        if (success) {
          confirm('操作已完成', '提示', {
            type: 'success',
            showCancelButton: false
          }).finally(_ => {
            this.loading = false
            this.$emit('refresh')
          })
        } else {
          this.loading = false
        }
      })
    }
  }
}
</script>
